import React, { Component } from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet, PixelRatio, TextInput } from 'react-native';
import { GLOBAL } from '../../config/global';
const scale = GLOBAL.SCALE;
let arrow = require('../../imgs/arrow-left.png');
/*
type:input select both 自定义
*/
export class Button extends Component {
	constructor(props) {
		super(props);
	}

	render () {
		let { type, text, width, height, onPress, disabled, btnStyle, textStyle } = this.props;
		return (
			<TouchableOpacity disabled={disabled} activeOpacity={.8} onPress={() => {
				onPress && onPress()
			}} style={[
				disabled ? null : styles.wrap,
				width ? { width: width * scale, height: height * scale } : null,
				disabled ? styles.disabled : (type == 'outline' ? styles.outlineWrap : styles.fillWrap),
				btnStyle ? btnStyle : null]}>

				<Text style={[styles.text,
				disabled ? styles.disabledText : (type == 'outline' ? styles.outlineText : styles.fillText),
				height ? { lineHeight: height * scale } : null,
				textStyle ? textStyle : null]}>{text}</Text>
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	wrap: {
		borderRadius: 4 * scale,
		borderColor: '#0E7FFD',
		borderStyle: 'solid',
		borderWidth: 1 / PixelRatio.get(),
		height: 42 * scale,
	},
	disabled: {
		backgroundColor: '#e4e4e4',
	},
	disabledText: {
		color: '#fff'
	},
	outlineWrap: {
		backgroundColor: '#FFFFFF',
	},
	fillWrap: {
		backgroundColor: '#0E7FFD'
	},
	outlineText: {
		color: '#0E7FFD',
	},
	fillText: {
		color: '#FFFFFF'
	},
	text: {
		lineHeight: 42 * scale,
		fontSize: 14 * scale,
		textAlign: 'center'
	}
})